﻿<!DOCTYPE html>
<html lang="en">
<head>
	<script src="/js/vue.js"></script>
	<script src="/js/axios.min.js"></script>

	<title>Products Archive</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<!-- GOOGLE WEB FONTS -->
	<link rel="stylesheet" href="css/font-awesome.min.css">

	<!-- BOOTSTRAP 3.3.7 CSS -->
	<link rel="stylesheet" href="css/bootstrap.min.css" />

	<!-- SLICK v1.6.0 CSS -->
	<link rel="stylesheet" href="css/slick-1.6.0/slick.css" />

	<link rel="stylesheet" href="css/jquery.fancybox.css" />
	<link rel="stylesheet" href="css/yith-woocommerce-compare/colorbox.css" />
	<link rel="stylesheet" href="css/owl-carousel/owl.carousel.min.css" />
	<link rel="stylesheet" href="css/owl-carousel/owl.theme.default.min.css" />
	<link rel="stylesheet" href="css/js_composer/js_composer.min.css" />
	<link rel="stylesheet" href="css/woocommerce/woocommerce.css" />
	<link rel="stylesheet" href="css/yith-woocommerce-wishlist/style.css" />
	<link rel="stylesheet" href="css/custom.css" />
	<link rel="stylesheet" href="css/app-orange.css" id="theme_color" />
	<link rel="stylesheet" href="" id="rtl" />
	<link rel="stylesheet" href="css/app-responsive.css" />
	<script src="/js/axios.min.js"></script>
	<script src="/js/vue.js"></script>
</head>

<body class="archive post-type-archive woocommerce post-type-archive-product">
<div class="app">
	<div  class="body-wrapper theme-clearfix" >
		<header id="header" class="header header-style1">
			<div class="header-top clearfix">
				<div class="container">
					<div class="rows">
						<!-- SIDEBAR TOP MENU -->
						<div class="pull-left top1">
							<div class="widget text-2 widget_text pull-left">
								<div class="widget-inner">
									<div class="textwidget">
									</div>
								</div>
							</div>

							<div class="widget text-3 widget_text pull-left">
								<div class="widget-inner">
									<div class="textwidget">
									</div>
								</div>
							</div>
						</div>

						<div class="wrap-myacc pull-right">
							<div class="sidebar-account pull-left">
								<div class="account-title">个人中心</div>
								<div id="my-account" class="my-account">
									<div class="widget-1 widget-first widget nav_menu-4 widget_nav_menu">
										<div class="widget-inner">
											<ul id="menu-my-account" class="menu">
												<li class="menu-my-account">
													<a class="item-link" href="my_account.html" @click="gerenzhongxin(userName)">
														<span class="menu-title">我的账户</span>
													</a>
												</li>
											</ul>
										</div>
									</div>

									<div class="widget-2 widget-last widget sw_top-4 sw_top">
										<div class="widget-inner">
											<div class="top-login">
												<div class="div-logined">
													<ul>
														<li>
															<a href="cart.html">
																<span>我的收藏</span>
															</a>
														</li>
													</ul>
												</div>
											</div>
										</div>
									</div>
									<div class="widget-2 widget-last widget sw_top-4 sw_top">
										<div class="widget-inner">
											<div class="top-login">
												<div class="div-logined">
													<ul>
														<li>
															<a href="login.html">
																<span>登录/注册</span>
															</a>
														</li>
													</ul>
												</div>
											</div>
										</div>
									</div>
									<div class="widget-2 widget-last widget sw_top-4 sw_top">
										<div class="widget-inner">
											<div class="top-login">
												<div class="div-logined">
													<ul>
														<li>
															<a @click="loginout(userName)" href="login.html">
																<span>退出登录</span>
															</a>
														</li>
													</ul>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>

							<div class="pull-left top2">
								<div class="widget-1 widget-first widget nav_menu-2 widget_nav_menu">
									<div class="widget-inner">
										<ul id="menu-checkout" class="menu">
											<li class="menu-checkout">
												<a class="item-link" href="#">
													<span class="menu-title">欢迎{{userName}}来到Cabbage</span>
												</a>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="header-mid clearfix">
				<div class="container">
					<div class="rows">
						<!-- 右上LOGO -->
						<div class="etrostore-logo pull-left">
							<br>
							<br>
							<h1 style="color:orange">CABBAGE</h1>
							<H4 style="color:rgb(189, 189, 189)">Your Online Bookstore</H4>
						</div>
						<!-- /右上LOGO -->
						<!--图书搜索栏-->
						<div class="mid-header pull-right">
							<div class="widget-1 widget-first widget sw_top-2 sw_top">
								<div class="widget-inner">
									<div class="top-form top-search">
										<div class="topsearch-entry">
											<form method="get" action="">
												<div>
													<input type="text" value="" name="s" placeholder="Enter your book...">
													<button type="submit" title="Search" class="fa fa-search button-search-pro form-button"></button>
												</div>
											</form>
										</div>
									</div>
								</div>
							</div>
							<!--/图书搜索栏-->
					</div>
				</div>
			</div>

			<div class="header-bottom clearfix">
				<div class="container">
					<div class="rows">
						<!-- Primary navbar -->
						<div id="main-menu" class="main-menu">
							<nav id="primary-menu" class="primary-menu">
								<div class="navbar-inner navbar-inverse">
									<ul id="menu-primary-menu-1" class="nav nav-pills nav-mega etrostore-mega etrostore-menures">
										<li><a href="index.html">首页</a></li>
										<li><a href="cart.html" @click="selectcart(userId)">收藏</a></li>
										<li><a href="checkout.html">结算</a></li>
										<li><a href="my_account.html">我的</a></li>
										<li><a href="shop.html">购物</a></li>
									</ul>
								</div>
							</nav>
						</div>
						<!-- /Primary navbar -->
					</div>
				</div>
			</div>
		</header>
		<div class="container">
			<div class="row">
				<div id="contents" class="content col-lg-9 col-md-8 col-sm-8" role="main">
					<div class="listing-top">
						<div class="widget-1 widget-first widget rev-slider-widget-2 widget_revslider">
							<div class="widget-inner">
								<!-- OWL SLIDER 轮播图-->
								<div class="wpb_revslider_element wpb_content_element no-margin">
									<div class="vc_column-inner ">
										<div class="wpb_wrapper">
											<div class="wpb_revslider_element wpb_content_element">
												<div id="main-slider" class="fullwidthbanner-container" style="position:relative; width:100%; height:auto; margin-top:0px; margin-bottom:0px">
													<div class="module slideshow no-margin">
														<div class="item">
															<a href="simple_product.html"><img src="images/book/slider.jpg" alt="slider1" class="img-responsive" height="559"></a>
														</div>
														<div class="item">
															<a href="simple_product.html"><img src="images/book/slider.jpg" alt="slider2" class="img-responsive" height="559"></a>
														</div>
														<div class="item">
															<a href="simple_product.html"><img src="images/book/slider.jpg" alt="slider3" class="img-responsive" height="559"></a>
														</div>
													</div>
													<div class="loadeding"></div>
												</div>
											</div>
										</div>
									</div>
								</div>

								<!--/OWL LIGHT SLIDER 轮播图-->
							</div>
						</div>
					</div>
					<!--点击连接到其他图书网站-->
					<div class="wpb_raw_code wpb_content_element wpb_raw_html">
						<div class="wpb_wrapper">
							<div class="wrap-transport">
								<div class="row">
									<div class="item item-1 col-lg-3 col-md-3 col-sm-6">
										<a href="http://book.dangdang.com/" class="wrap">
											<div class="icon">
												<image src="images\icons\dangdang.png">
											</div>

											<div class="content">
												<h3>当当网</h3>
												<p>book.dangdang.com</p>
											</div>
										</a>
									</div>

									<div class="item item-2 col-lg-3 col-md-3 col-sm-6">
										<a href="https://book.jd.com/" class="wrap">
											<div class="icon">
												<image src="images\icons\jd.png">
											</div>


											<div class="content">
												<h3>京东图书</h3>
												<p>book.jd.com</p>
											</div>
										</a>
									</div>

									<div class="item item-3 col-lg-3 col-md-3 col-sm-6">
										<a href="https://list.suning.com/0-502282-0.html?safp=d488778a.46602.crumbs.2&safc=cate.0.0&safpn=10006.502325#search-path" class="wrap">
											<div class="icon">
												<image src="images\icons\sn.png">
											</div>

											<div class="content">
												<h3>苏宁图书</h3>
												<p>suning.com</p>
											</div>
										</a>
									</div>

									<div class="item item-4 col-lg-3 col-md-3 col-sm-6">
										<a href="https://book.tmall.com/?spm=a21bo.jianhua.201867-main.29.5af911d9tCIUKv
									" class="wrap">
											<div class="icon">
												<image src="images\icons\tm.png">
											</div>
											<div class="content">
												<h3>天猫图书</h3>
												<p>book.tmall.com</p>
											</div>
										</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!--/点击连接到其他图书网站-->
					<div   id="container">
						<div id="content" role="main">
							<!--  Shop Title -->
							<div  class="products-wrapper"  >
								<!--筛选商品按钮-->
								<div class="products-nav clearfix">
									<div class="view-mode-wrap pull-left clearfix">
										<div class="view-mode">
											<a href="javascript:void(0)" class="grid-view active" title="Grid view"><span></span></a>
											<a href="javascript:void(0)" class="list-view" title="List view"><span></span></a>
										</div>
									</div>

									<div   class="catalog-ordering">
										<div class="orderby-order-container clearfix">
											<ul class="orderby order-dropdown pull-left">
												<li>
													<span class="current-li"><span class="current-li-content"><a>综合排序</a></span></span>
													<ul>
														<li class="current"><a href="#">按综合排序</a></li>
														<li class=""><a href="#">按好评率排序</a></li>
														<li class=""><a href="#">按销量排序</a></li>
														<li class=""><a href="#">按价格排序</a></li>
													</ul>
												</li>
											</ul>

											<ul class="order pull-left">
												<li class="asc"><a href="#"><i class="fa fa-long-arrow-down"></i></a></li>
											</ul>

											<!--											<div class="product-number pull-left clearfix">-->
											<!--												<span class="show-product pull-left">显示</span>-->
											<!--												<ul class="sort-count order-dropdown pull-left">-->
											<!--													<li>-->
											<!--														<span class="current-li"><a>12</a></span>-->
											<!--														<ul>-->
											<!--															<li class="current"><a href="#">12</a></li>-->
											<!--															<li class=""><a href="#">24</a></li>-->
											<!--															<li class=""><a href="#">36</a></li>-->
											<!--														</ul>-->
											<!--													</li>-->
											<!--												</ul>-->
											<!--											</div>-->
										</div>
									</div>
									<!--									<nav class="woocommerce-pagination pull-right">-->
									<!--										<span class="note">页:</span>-->
									<!--										<ul class="page-numbers">-->
									<!--											<li><span class="page-numbers current">1</span></li>-->
									<!--											<li><a class="page-numbers" href="#">2</a></li>-->
									<!--											<li><a class="page-numbers" href="#">3</a></li>-->
									<!--											<li><a class="next page-numbers" href="#">?</a></li>-->
									<!--										</ul>-->
									<!--									</nav>-->
								</div>
								<!--/筛选商品按钮-->
								<div class="clear"></div>
								<!--商品陈列-->

								<ul class="products-loop row grid clearfix">
									<!--									<div    ><table><tr v-for="listzuo in listzuobian">-->

									<!--										<td>{{listzuo.bookName}}</td>-->
									<!--										<td>{{listzuo.bookPrice}}</td></tr></table></div>-->
									<!--									<div   v-for="listt in pageInfo.list" ><table><td >-->

									<!--										  <div  v-html="html">-->
									<!--											{{html}}</div>-->
									<!--										<a href="simple_product.html" title="corned beef enim">{{listt.bookName}}</a>-->
									<!--										{{listt.bookPrice}}</td></table></div>-->

									<div  class="col-lg-4 col-sm-6 col-12"    v-for="listt in pageInfo.list" >

										<div><a @click="detailbook1(listt.isbn),detailbook2(listt.writer)" ><img width="400" height="400" :src="listt.image" /></a></div>
										<div><a @click="detailbook1(listt.isbn),detailbook2(listt.writer)" >{{listt.bookName}}</a></div>
										<div>{{listt.bookPrice}}</div>
									</div>
								</ul>
								<nav aria-label="Page navigation">
									<ul class="pagination">
										<li @click="getPreviousPageData(pageInfo.pageNum)">
											<a href="#" aria-label="Previous">
												<span aria-hidden="true">&laquo;</span>
											</a>
										</li>
										<li :class="pageInfo.pageNum==num?'active':''" @click="getPageData(num)" v-for="num in pageInfo.navigatepageNums">
											<a>{{num}}</a>
										</li>
										<li @click="getNextPageData(pageInfo.pageNum)">
											<a href="#" aria-label="Next">
												<span aria-hidden="true">&raquo;</span>
											</a>
										</li>
									</ul>
								</nav>
								<div class="clear"></div>
							</div>
						</div>
					</div>
				</div>
				<aside id="right" class="sidebar col-lg-3 col-md-4 col-sm-4">
					<!--图书分类栏-->
					<div   class="widget-1 widget-first widget woocommerce_product_categories-3 woocommerce widget_product_categories">
						<div class="widget-inner">
							<div class="block-title-widget">
								<h2><span>图书分类</span></h2>
							</div>
							<ul class="product-categories">
								<li class="cat-item"><a href="child.html">童书</a></li>
								<li class="cat-item"><a href="wenyi.html">文艺</a></li>
								<li class="cat-item"><a href="xiaoshuo.html">小说</a></li>
								<li class="cat-item"><a href="qingchun.html">青春励志</a></li>
								<li class="cat-item"><a href="renwen.html">人文社科</a></li>
								<li class="cat-item"><a href="manage.html">经管</a></li>
								<li class="cat-item"><a href="jiaoyu.html">教育</a></li>
								<li class="cat-item"><a href="life.html">生活</a></li>
							</ul>
						</div>
					</div>
					<!--/图书分类栏-->
					<!--图书畅销榜-->
					<div class="widget-5 widget etrostore_best_seller_product-3 etrostore_best_seller_product">
						<div class="widget-inner">
							<div class="block-title-widget">
								<h2><span>图书畅销榜</span></h2>
							</div>

							<div class="sw-best-seller-product">
								<ul class="list-unstyled">
									<li class="clearfix">
										<div    class="item-img">
											<!--											<a href="simple_product.html" title="corned beef enim">-->
											<!--												<img width="180" height="180" src="images/book/rank.jpg">-->
											</a>
										</div>

										<div  class="item-content">


											<div>
												<div >
													<!--											<table>-->
													<!--												<tr>-->
													<!--													<th> 书名</th>-->
													<!--													<th> 价格</th>-->
													<!--												</tr>-->
													<!--												<tr v-for="listhot in listhotbook"  >-->

													<!--													<td>{{listhot.bookName}}</td>-->
													<!--													<td>{{listhot.bookPrice}}</td>-->
													<!--													<h4><a href="simple_product.html" title="corned beef enim"></a></h4>-->

													<!--												</tr></table>-->
													<div v-for="listhot in listhotbook"  >
														<div><a @click="detailbook1(listhot.isbn),detailbook2(listhot.writer)" ><img width="400" height="400" :src="listhot.image" /></a></div>
														<div><a @click="detailbook1(listhot.isbn),detailbook2(listhot.writer)" >{{listhot.bookName}}</a></div>
														<div>{{listhot.bookPrice}}</div>
													</div>
													<!--												</tr>-->
													<!--											</table>-->
												</div>
												<!--											<div class="reviews-content">-->
												<!--												<div class="star"></div>-->
												<!--												<div class="item-number-rating">-->
												<!--													0 Review(s)					-->
												<!--										</div>-->
											</div>

											<!--											<h4><a href="simple_product.html" title="corned beef enim"></a></h4>-->

											<!--											<div class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">￥</span>30.00</span></div>-->
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</aside>
				<!--/图书畅销榜-->
			</div>
		</div>

		<footer id="footer" class="footer default theme-clearfix">
			<div class="footer-copyright style1">
				<div class="container">
					<!-- Copyright text -->
					<div class="copyright-text">
						<center><p>Copyright &copy; 2022.Company name All rights reserved.cabbage</p></center>
					</div>

					<div class="sidebar-copyright pull-right">
						<div class="widget-1 widget-first widget text-4 widget_text">
							<div class="widget-inner">
								<div class="textwidget">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</footer>
		<!-- /Copyright text -->
	</div></div>
<script type="text/javascript" src="js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery-migrate.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery/js.cookie.min.js"></script>
<!-- OPEN LIBS JS -->
<script type="text/javascript" src="js/owl-carousel/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/slick-1.6.0/slick.min.js"></script>
<script type="text/javascript">
	/* <![CDATA[ */
	var woocommerce_price_slider_params = {"currency_symbol":"$","currency_pos":"left","min_price":"100","max_price":"500"};
	/* ]]> */
</script>
<script type="text/javascript" src="js/widget.min.js"></script>
<script type="text/javascript" src="js/mouse.min.js"></script>
<script type="text/javascript" src="js/slider.min.js"></script>
<script type="text/javascript" src="js/js_composer/js_composer_front.min.js"></script>
<script type="text/javascript" src="js/yith-woocommerce-compare/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="js/sw_core/isotope.js"></script>
<script type="text/javascript" src="js/sw_core/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="js/sw_woocommerce/category-ajax.js"></script>
<script type="text/javascript" src="js/sw_woocommerce/jquery.countdown.min.js"></script>
<script type="text/javascript" src="js/woocommerce/price-slider.min.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>
<script type="text/javascript" src="js/megamenu.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript">
	var sticky_navigation_offset_top = $("#header .header-bottom").offset().top;
	var sticky_navigation = function(){
		var scroll_top = $(window).scrollTop();
		if (scroll_top > sticky_navigation_offset_top) {
			$("#header .header-bottom").addClass("sticky-menu");
			$("#header .header-bottom").css({ "top":0, "left":0, "right" : 0 });
		} else {
			$("#header .header-bottom").removeClass("sticky-menu");
		}
	};
	sticky_navigation();
	$(window).scroll(function() {
		sticky_navigation();
	});

	$(document).ready (function () {
		$( ".show-dropdown" ).each(function(){
			$(this).on("click", function(){
				$(this).toggleClass("show");
				var $element = $(this).parent().find( "> ul" );
				$element.toggle( 300 );
			});
		});
	});
</script>

<!--[if gte IE 9]><!-->
<script type="text/javascript">
	var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');
	request = true;

	b[c] = b[c].replace( rcs, ' ' );
	// The customizer requires postMessage and CORS (if the site is cross domain)
	b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
</script>
<!--<![endif]-->
</body>
</html>
<script>
	new Vue({
		el:".app",
		data:{
			listzuobian:[],
			pageInfo:[],
			admin_id:"",

			bookimage:'',
			html:'',

			userName:'',
			userId:'',

			listhotbook:[]

		},
		methods:{

			loginout:function () {
				window.localStorage.setItem("userName","");
			},

            //传值到我的账户信息
			gerenzhongxin:function (userName){
				window.localStorage.setItem("userName",userName);
				location.href="my_account.html"
			},

			//cart
			selectcart:function (userId){
				window.localStorage.setItem("userId",this.userId);
				location.href="cart.html";
			},

			//分页
			getPreviousPageData:function (num){
				num--;
				if(num<1){
					return;
				}
				this.getPageData(num)
			},
			getNextPageData:function (num){
				num++;
				if(num>this.pageInfo.pages){
					return;
				}
				this.getPageData(num)
			},
			getPageData:function (num) {
				_this = this
				axios.get('/index/list/' + num,{
					params: {

					}
				})
						.then(function (response) {
							_this.pageInfo = response.data.object;
							console.log(response.data);
						})
						.catch(function (error) {
							console.log(error);
						})
			},

			detailbook1:function (isbn){
				// alert(isbn);
				window.localStorage.setItem("isbn",isbn);
				location.href="simple_product.html"
			},
			detailbook2:function (writer){
				// alert(writer);
				window.localStorage.setItem("writer",writer);
				location.href="simple_product.html"
			},
		},
		mounted() {
			_this = this
			this.userName = window.localStorage.getItem("userName")

			//cart
			var cartUName =this.userName
			axios.get('spbook/sp/userName', {
				params: {
					userName:cartUName
				}
			}).then(function (response) {
				console.log(response.data.object);
				_this.userId = response.data.object.userID;
				console.log(_this.userId);
			})
					.catch(function (error) {
						console.log(error);
					});

			//查询热销榜
			axios.get('/index/listhot', {
				params: {
					// bookName:this.name,
					// bookPrice:this.price
				}
			}).then(function (response) {
				_this.listhotbook = response.data.object;
				//console.log(_this.listhotbook);
			})
					.catch(function (error) {
						console.log(error);
					});

			//分页
			this.getPageData(1)
			_this = this
			var admin_id = window.localStorage.getItem("admin_id")
			this.admin_id = admin_id;
			console.log(admin_id);
			axios.get('/index/list')
					.then(function (response) {
						_this.countList = response.data.object;
					})
					.catch(function (error) {
						console.log(error);
					});

			axios.get('/index/listzuobian', {
				params: {
					// bookName:this.name,
					// bookPrice:this.price
				}
			}).then(function (response) {
				_this.listzuobian = response.data.object;
				console.log(_this.listzuobian);
			})
					.catch(function (error) {
						console.log(error);
					})

			//图片
			__this=this
			// var ISBN = window.localStorage.getItem("isbn")
			// console.log(ISBN)
			// 查询最便宜信息
			axios.get('/index/listzuobian',{
				params: {
					// ISBN:ISBN
				}
			}).then(function (response) {
				__this.bookimage=response.data.object.image;
				console.log(__this.bookimage);
				__this.html='<img width="400" height="400" src="'+__this.bookimage+'" />';
				console.log(__this.html);
			})
					.catch(function (error) {
						console.log(error);
					})
		}
	})
</script>